<template>
  <div class="home">
    <!-- 头部分类 -->
    <cate-header :categoryList="categoryList"></cate-header>

    <!-- 首页热门页面 -->
    <transition name="fade-choose">
      <div class="home-scroll-wrapper" v-if="opt_name==='热门'">
        <scroll class="home-scroll" :data="productList" :probeType="3" ref="scroll" :listenScroll="true" @scroll="scroll" :bounce="true" :pullup="true" @scrollToEnd="loadMore">
          <div>
            <!-- 头部内容区域 -->
            <div class="home-content">
              <!-- 轮播图 -->
              <div class="slide">
                <van-swipe>
                  <van-swipe-item v-for="(image, index) in images" :key="index">
                    <img :src="image.img_url" alt="">
                  </van-swipe-item>
                </van-swipe>
              </div>
              <!-- 活动图标列表 -->
              <div class="activity-list">
                <van-swipe :loop="false">
                  <van-swipe-item v-for="page in pages" class="list-wrapper">
                    <li class="activity-item" v-for="item in page">
                      <div class="icon-img">
                        <img :src="item.image" alt="">
                      </div>
                      <div class="icon-text">
                        <span>{{item.title}}</span>
                      </div>
                    </li>
                  </van-swipe-item>
                </van-swipe>
              </div>
            </div>
            <!-- 广告图 -->
            <div class="banner-image">
              <img src="//t00img.yangkeduo.com/goods/images/2018-09-07/15115daea3f61a78e9246785006f7aa1.jpeg?imageMogr2/strip%7CimageView2/2/w/1300/q/80" alt="">
            </div>
            <!-- 首页商品列表 -->
            <div class="product-list-wrapper">
              <div class="product-item" v-for="item in productList" @click="toGoods(item.goods_id)">
                <div class="product-image">
                  <img v-lazy="item.image_url">
                </div>
                <div class="product-name">{{item.goods_name}}</div>
                <div class="detail">
                  <div class="left">
                    <div class="sale-price">
                      <span>￥</span>
                      <span>{{item.group.price/100}}</span>
                    </div>
                    <div class="group-desc">
                      <span>{{item.sales_tip}}</span>
                    </div>
                  </div>
                  <div class="right">
                    <van-button type="danger">去拼单
                      <van-icon name="arrow" />
                    </van-button>
                  </div>
                </div>
              </div>
            </div>
            <!-- 加载中动画 -->
            <div class="hasMoreText" v-show="hasMore">
              <van-loading type="spinner" />
              <span class="loadingText">正在加载中...</span>
            </div>

            <div class="hasMoreButton">
              <van-button type="danger" plain>查看更多推荐商品
                <van-icon name="arrow" />
              </van-button>
            </div>

          </div>
        </scroll>
      </div>
    </transition>
    <!-- 返回顶部按钮 -->
    <go-top @toTop="toTop" :scrollY="scrollY" v-if="opt_name==='热门'"></go-top>

    <!-- 首页其他分类页面 -->
    <div v-for="item in categoryList">
      <transition name="fade-choose">
        <div class="home-scroll-wrapper" v-if="item.opt_name === opt_name && opt_name!='热门'">
          <category></category>
        </div>
      </transition>
    </div>

    <!-- 首页消息通知 拼单消息 -->
    <div class="message-wrapper">
      <transition name="fade">
        <div class="bubble-content" v-for="(item,index) in messageArray" v-if="index === current">
          <img :src="item.image_url">
          <p>
            <span>{{item.content}}</span>
            <van-icon name="arrow" />
          </p>
        </div>
      </transition>
    </div>

  </div>
</template>

<script>
import cateHeader from "../../components/Header/cateHeader";
import Scroll from "../../common/scroll";
import category from "./children/category";
import goTop from "../../components/goTop/goTop";
import {
  categoryList,
  slide,
  activityList,
  productList
} from "../../api/getDatas";
export default {
  components: {
    Scroll,
    cateHeader,
    category,
    goTop
  },
  data() {
    return {
      categoryList: [],
      images: [],
      activityList: [],
      productList: [],
      page: "23",
      hasMore: false,
      scrollY: null,
      current: 0,
      messageArray: [
        {
          content: "广东省的🍉 🍉 🍀 1秒前发起了拼单",
          image_url:
            "http://t00img.yangkeduo.com/t09img/images/2018-06-21/ef5f0c90eb17af5686169a42b0519708.jpeg",
          jump_link: "group7.html?group_order_id=559170748805952422"
        },
        {
          content: "广东省的巴黎夜雨 1秒前发起了拼单",
          image_url:
            "http://t08img.yangkeduo.com/images/2018-04-27/a04e9f198cb100bc30b71285cf5ef160.jpeg",
          jump_link: "group7.html?group_order_id=559562627871433252"
        },
        {
          content: "浙江省的想想 1秒前发起了拼单",
          image_url:
            "http://t01img.yangkeduo.com/images/2018-04-16/888875ea1de276067955135b511181f5.jpeg",
          jump_link: "group7.html?group_order_id=559297694659712029"
        }
      ]
    };
  },
  computed: {
    opt_name() {
      if (!this.$store.state.cateHeader.categoryItem) {
        return "热门";
      } else {
        return this.$store.state.cateHeader.categoryItem.opt_name;
      }
    },
    pages() {
      let pages = [];
      this.activityList.forEach((item, index) => {
        let page = Math.floor(index / 10);
        if (!pages[page]) {
          pages[page] = [];
        }
        pages[page].push(item);
      });
      return pages;
    }
  },
  methods: {
    showMarquee: function() {
      let max = this.messageArray.length;
      if (this.current < max) {
        this.current++;
      } else {
        this.current = 0;
      }
    },

    toGoods(id) {
      this.$router.push({ path: `/goods/${id}` });
    },
    // 加载更多
    loadMore() {
      if (!this.hasMore) {
        return;
      }
      this.page++;
      productList(this.page).then(res => {
        this.productList = this.productList.concat(res.data.goods_list);
        if (res.data.total_size === 0) {
          this.hasMore = false;
        } else {
          this.hasMore = true;
        }
      });
    },

    // 上拉刷新数据
    loadData() {
      // this.initData();
    },
    toTop() {
      this.$refs.scroll.scrollTo(0, 0, 500);
    },
    scroll(pos) {
      this.scrollY = -pos.y;
    },
    // 初始化数据
    initData() {
      // 请求顶部分类数据
      categoryList().then(res => {
        let hot = [{ opt_name: "热门" }];
        this.categoryList = hot.concat(res.data.data);
      });
      // 请求轮播图数据
      slide().then(res => {
        this.images = res.data.result;
      });
      // 活动图标列表数据
      activityList().then(res => {
        this.activityList = res.data.icons;
      });
      // 首页商品列表数据
      productList(this.page).then(res => {
        this.productList = res.data.goods_list;
        if (res.data.total_size === 0) {
          this.hasMore = false;
        } else {
          this.hasMore = true;
        }
      });
    }
  },
  created() {
    this.initData();
    setInterval(this.showMarquee, 3000);
  }
};
</script>

<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.home {
  .message-wrapper {
    position: fixed;
    top: 0.52rem;
    left: 0.1rem;
    height: 0.32rem;
    overflow: hidden;
  }
  .bubble-content {
    border-radius: 0.04rem;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    border-radius: 0.05rem;
    img {
      width: 0.32rem;
      height: 0.32rem;
    }
    p {
      color: white;
      font-size: 0.12rem;
      display: flex;
      padding-left: 0.05rem;
      .van-icon-arrow {
        padding: 0 0.07rem;
      }
    }
  }
  .home-scroll-wrapper {
    position: fixed;
    top: 0.41rem;
    left: 0;
    right: 0;
    bottom: 50px;
    .home-scroll {
      height: 100%;
      overflow: hidden;
    }
  }
  .home-scroll {
    .slide {
      img {
        width: 3.75rem;
        height: 1.4rem;
      }
    }
    .activity-list {
      width: 100%;
      height: 1.55rem;
      display: block;
      position: relative;
      padding: 0 0 0.06rem;
      overflow: hidden;
      color: #777;
      background-color: white;
      .van-swipe {
        height: 100%;
        .van-swipe__indicators {
          bottom: 0px;
        }
      }
      .list-wrapper {
        display: flex;
        flex-wrap: wrap;
      }
      .activity-item {
        width: 0.75rem;
        margin-top: 0.1rem;
        .icon-img {
          display: flex;
          justify-content: center;
        }
        img {
          width: 0.39rem;
          height: 0.39rem;
        }
        .icon-text {
          font-size: 0.12rem;
          text-align: center;
          margin-top: 0.05rem;
        }
      }
    }
  }
  .banner-image {
    margin-top: 0.08rem;
    img {
      width: 100%;
    }
  }
  .product-list-wrapper {
    margin-top: 0.08rem;
    margin-bottom: 0.5rem;
    .product-item {
      background-color: white;
      margin-bottom: 0.08rem;
      .product-image {
        position: relative;
        width: 100%;
        height: 1.76rem;
        overflow: hidden;
        margin-bottom: 0.1rem;
        img {
          width: 100%;
          height: auto;
        }
      }
      .product-name {
        font-size: 0.16rem;
        color: #151516;
        height: 0.41rem;
        line-height: 0.21rem;
        overflow: hidden;
        word-break: break-all;
        word-wrap: break-word;
        white-space: normal;
        text-align: left;
        text-overflow: clip;
        vertical-align: middle;
        padding: 0 0.1rem;
      }
      .detail {
        position: relative;
        width: 100%;
        height: 0.6rem;
        padding: 0 0.1rem 0.01rem;
        justify-content: space-between;
        align-items: center;
        display: flex;
        .left {
          display: flex;
          justify-content: flex-start;
          align-items: flex-end;
          .sale-price {
            font-size: 0.2rem;
            color: #e02e24;
            margin-right: 0.03rem;
            font-weight: 700;
          }
          .group-desc {
            padding-left: 0.03rem;
            font-size: 0.12rem;
            color: #9c9c9c;
            padding-bottom: 0.02rem;
          }
        }
      }
    }
  }
}
</style>

<style lang="less">
.van-button__text {
  display: flex;
  align-items: center;
}
.hasMoreText {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #666;
  .loadingText {
    margin-left: 0.2rem;
    font-size: 0.12rem;
  }
}
.hasMoreButton {
  display: flex;
  justify-content: center;
  margin: 0.15rem 0;
}

.fade-choose-enter-active,
.fade-choose-leave-active {
  transition: all 0.3s;
}
.fade-choose-leave,
.fade-choose-leave-active {
  display: none;
}
.fade-choose-enter,
.fade-choose-leave-active {
  opacity: 0;
}
</style>
